<!--代码逻辑和样式库-->
<script src="./dictionary-management.component.js"></script>
<style src="./dictionary-management.scss" scoped lang="scss"></style>

<template>
  <div>
    <div class="search-container">
      <el-form :model="searchForm" label-position="top" label-width="80px">
        <div class="aq-padding-bottom-8">数据筛选</div>
        <el-row :gutter="20" type="flex">
          <el-col :span="6">
            <el-form-item class="aq-form-card">
              <div>字典名称<span class="aq-search-text">请根据字典名称搜索</span></div>
              <el-input prefix-icon="el-icon-search" v-model="searchForm.typeName" placeholder="请根据字典名称" @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="userInfo.userId === '-1'" :span="6">
            <el-form-item class="aq-form-card">
              <div>字典类型<span class="aq-search-text">请输入字典类型搜索</span></div>
              <el-input prefix-icon="el-icon-search" v-model="searchForm.tableName" placeholder="请输入字典类型" @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="aq-search-button aq-primary-button" @click="search()">筛选</div>
          </el-col>
          <el-col :span="2">
            <div class="aq-search-button aq-warning-button" @click="onReset()">重置</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 搜索区域 -->
      <div class="aq-padding-top-16 aq-padding-bottom-16">
        <el-button v-waves v-if="userInfo.userId === '-1'" type="success" icon="el-icon-plus" @click="openCreateOrEditDialog()">创建字典</el-button>
        <el-button v-waves v-if="codesCheck.indexOf('Delete') !== -1" type="danger" icon="el-icon-delete" @click="deleteSelectedData()">批量删除</el-button>
      </div>
      <el-table v-loading="loading" :data="data" border fit highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column type="index" :index="setIndex" label="序号" width="55" />
        <el-table-column prop="typeName" label="字典名称">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="moveToDictionaryListPage(scope.row)">{{ scope.row.typeName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="createUserName" label="创建人" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="userInfo.userId === '-1'" plain size="mini" type="primary" @click="openCreateOrEditDialog(scope.row,'copy')">复制</el-button>
            <el-button v-if="codesCheck.indexOf('Delete') !== -1" plain size="mini" type="danger" @click="deleteSelectedData(scope.row.objectId,scope.row.typeName)">删除</el-button>
            <el-button v-if="codesCheck.indexOf('Edit') !== -1" plain size="mini" type="success" @click="openCreateOrEditDialog(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>
    <create-dictionary-type v-if="createOrEditDialogVisible" :type="type" :dic-type="selectDicType" @reload="reload()" @close="closeCreateOrEditDialog"></create-dictionary-type>
  </div>
</template>
